<script setup>
	import { ref, reactive } from 'vue'
	import { message } from 'ant-design-vue'
	import datasetApi from '@/views/plugin/dashboard/api/datasetApi'
	import tool from '@/utils/tool'
	const recordData = ref(null)

	const props = defineProps({
		indicator: {
			type: Object,
			default: () => ({})
		}
	})

	const emit = defineEmits(['loadData'])

	const visible = ref(false)
	const indicatorForm = reactive({
		id: '',
		name: '',
		type: 'query'
	})

	const resetForm = () => {
		indicatorForm.name = ''
		indicatorForm.type = 'query'
	}

	const onOpen = (record, indicator, indicatorType) => {
		recordData.value = record
		if (indicator) {
			indicatorForm.name = indicator.name
			indicatorForm.type = indicator.type
			indicatorForm.id = indicator.id
		} else {
			indicatorForm.name = ''
			// 根据传入的指标类型设置默认类型
			if (indicatorType === 'api') {
				indicatorForm.type = 'api_query'
			} else {
				indicatorForm.type = 'query'
			}
			indicatorForm.id = ''
		}
		console.log(recordData.value)
		visible.value = true
	}

	const handleCancel = () => {
		resetForm()
		visible.value = false
	}

	const handleOk = async () => {
		if (!indicatorForm.name) {
			message.error('请输入指标名称')
			return
		}

		if (!recordData.value.config) {
			recordData.value.config = { indicators: [] }
		}

		recordData.value.config.indicators = recordData.value.config.indicators || []

		if (indicatorForm.id) {
			// 修改指标
			const index = recordData.value.config.indicators.findIndex((item) => item.id === indicatorForm.id)
			if (index !== -1) {
				recordData.value.config.indicators[index] = {
					id: indicatorForm.id,
					name: indicatorForm.name,
					type: indicatorForm.type,
					datasetId: recordData.value.id,
					dataConnectorId: recordData.value.dataConnectorId,
					itemConfig: recordData.value.config.itemConfig
				}
			}
		} else {
			// 新增指标
			let itemConfig = {}

			// 根据指标类型设置不同的默认配置
			if (indicatorForm.type === 'api_query') {
				// API指标的默认配置
				itemConfig = {
					apiPath: '',
					apiMethod: 'GET',
					apiParams: {},
					enableCamelCase: false,
					selectedColumns: [],
					formatConfig: [],
					columns: []
				}
			} else {
				// 普通指标的默认配置
				itemConfig = {
					enableCamelCase: false,
					selectedColumns: [],
					formatConfig: [],
					columns: [],
					tableName: '',
					conditions: []
				}
			}

			recordData.value.config.indicators.push({
				id: tool.snowyUuid(),
				name: indicatorForm.name,
				type: indicatorForm.type,
				datasetId: recordData.value.id,
				dataConnectorId: recordData.value.dataConnectorId,
				itemConfig: itemConfig
			})
		}

		// 调用接口保存
		await datasetApi.save(recordData.value)
		// 重置表单并关闭弹出框
		resetForm()
		visible.value = false
		// 刷新表格
		emit('loadData')
	}

	defineExpose({
		onOpen
	})
</script>

<template>
	<a-modal
		v-model:open="visible"
		:title="indicatorForm.id ? '修改指标' : '添加指标'"
		@ok="handleOk"
		@cancel="handleCancel"
	>
		<a-form layout="vertical">
			<a-form-item label="指标名称" required>
				<a-input v-model:value="indicatorForm.name" placeholder="请输入指标名称" />
			</a-form-item>
			<a-form-item label="指标类型" required>
				<a-radio-group v-model:value="indicatorForm.type" :disabled="indicatorForm.id ? true : false">
					<a-radio value="query">可视化配置</a-radio>
					<a-radio value="stat">自定义配置</a-radio>
					<a-radio value="api_query">API接口配置</a-radio>
				</a-radio-group>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
